<template>
	<view class="min-h-screen bg-gray-50 text-gray-800">
		<con-venues :itemChooselist='itemChooselist' :venuelist='venuelist' @confirm="confirm1"></con-venues>
		<view style="position: fixed;z-index: 999;width: 100%;top: 120rpx;">
			<view class="box_11">
				<view class="image-wrapper_7">
					<u-search @search="search" @custom="search" placeholder="搜索" :showAction="false" v-model="keyword">
					</u-search>
				</view>
				<view class="label8_list" @click="openFilter">
					<uni-icons type="settings" size="16"></uni-icons>
					<view class="label_88">
						<text>筛选</text>
					</view>
				</view>
			</view>
			<view class="tab-filter">
				<view class="tabs">
					<view class="tab-item" :class="{'active': selected_Tab == item.id}" @click="selectedTab(item,index)"
						v-for="(item,index) in week_List" :key="index">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 核销记录列表 -->
		<view class="record-list pb-20" style="margin-top: 180rpx;">
			<view v-for="(record, index) in passlist" :key="index" class="record-card  mb-4 "
				@click="showDetail(record)">
				<view class="card-content p-4">

					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.created_at }}</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;color: #00aa00; ">
							<view v-if="record.deduct_num==1 && record.record_state==3">已核销<text style="color:red">已作废
								</text></view>
							<view v-else-if="record.deduct_num==-1 && record.record_state==3">已作废</view>
							<view v-else-if="record.deduct_num==1 && record.record_state==1">已核销</view>
						</view>
					</view>
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.code_no }}</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view>操作人/渠道: {{ record.founder }}/{{ record.channel_name }}</view>
						</view>
					</view>

					<view
						style="display: flex;flex-direction: row; align-items: center; font-size: 26rpx;margin-bottom: 10rpx;">
						<text>{{ record.consume_trade_no }}</text>
						<image style="width: 26rpx;height: 26rpx;" @click="copyId(record)"
							src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
							mode=""></image>
					</view>

					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.card_name }}</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row; justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text style="color: #0055ff;">{{ record.record_type_name }}</text>
							</view>
						</view>
					</view>

					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view style="display: flex;flex-direction: row;align-items: center; font-size: 26rpx;">
							<text>{{ record.username == null ? '散客': record.username }}</text>
							<view class="" style="margin-left: 10rpx;">
								<u-tag :text="record.vip_info.name" plain plainFill size="mini"></u-tag>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text>支付方式:{{ record.record_type_name }}</text>
							</view>
						</view>
					</view>

					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.user_mobile}}</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text>支付:{{ record.paid }}</text>
								<text style="margin-left: 10rpx;">剩余:{{ record.else_money }}</text>
							</view>
						</view>
					</view>

					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text style="margin-right: 10rpx;">外码: {{ record.outer_code }}</text>
								<text>内码: {{ record.inner_code}}</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text
									style="margin-right: 10rpx;">发放:{{ record.bracelet_send_person}}/{{record.bracelet_pos}}</text>
							</view>
						</view>
					</view>

					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{record.bracelet_send_time}}</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<text>押金:</text>
							<text
								v-if="record.check_state==2||record.record_state==3">{{record.deposit_state}}({{ record.deposit}})</text>
							<text v-else style="color: red">{{record.deposit_state}} ({{ record.deposit}})</text>
						</view>
					</view>

					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text style="margin-right: 10rpx;">进场:{{record.in_time}}({{record.in_pos_name}})</text>
								<text>出场:{{record.out_time}}({{record.out_pos_name}})</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text style="margin-right: 10rpx;">历时: {{record.time_minute}}</text>
								<text style="margin-right: 10rpx;">超时: {{record.over_minutes}}</text>
								<text>超时费: {{record.over_fee}}</text>
							</view>
						</view>
					</view>
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view style="display: flex;flex-direction: row; align-items: center; font-size: 26rpx; ">
							<view style="margin-right: 10rpx;">时间: {{ record.check_time }}</view>
							<view>结账人: {{ record.check_man}}/{{record.check_pos}}</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<u-tag v-if="record.record_state==1"
									:type="record.check_state == 1 ? 'warning':'success'"
									:text="checkStateList[record.check_state]" size="mini"></u-tag>
								<u-tag v-else type="error" size="mini">
									已撤销
								</u-tag>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup @touchmove.stop :show="showFilterPopup" @close="closehomeInfo" closeOnClickOverlay mode="right">
			<scroll-view class="filter-content" style="height: 100vh;width: 60vw;" scroll-y>
				<view class="filter-item">
					<text class="filter-label">核销状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId1 === index? 'active' : '']"
								v-for="(item,index) in weekList1" :key="index" @click="timesSelect1(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

				<view class="filter-item">
					<text class="filter-label">来源</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="{'active': train_program.includes(idx)}"
								v-for="(item,idx) in weekList2" :key="index" @click="timesSelect2(item,idx)">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<!--<view class="filter-item" style="display: flex;flex-direction: row;justify-content: space-between;">
					<text class="filter-label">七天有课</text>
					<u-checkbox shape='circle' :checked="reg_face"  @change='checkboxChange'>选中</u-checkbox>
				</view> -->
				<!-- 	<view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId3 === index? 'active' : '']"
								v-for="(item,index) in weekList3" :key="index" @click="timesSelect3(item,index)">
								{{item}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="filter-item">
					<text class="filter-label">项目</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="{'active': coach_id.includes(item.name)}"
								v-for="(item,index) in weekList4" :key="index" @click="timesSelect4(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">核销类型</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="{'active': course_id.includes(item.id)}"
								v-for="(item,index) in weekList5" :key="index" @click="timesSelect5(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">操作员</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="{'active': jiaoSelect.includes(item.id)}"
								v-for="(item,index) in weekList6" :key="index" @click="timesSelect6(item,index)">
								{{item.nickname}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				searchText: '',
				records: [],
				showFilterDialog: false,
				showDialog: false,
				currentRecord: null,
				filterForm: {
					types: [],
					statuses: [],
					sport: '',
					dateRange: [null, null],
					sortField: 'date',
					sortOrder: 'desc'
				},
				searchIcon: {
					name: 'search',
					size: 18
				},
				itemChooselist: {},
				venuelist: [],
				plshow: true,
				venue_id: '',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 5,
				},
				totalPage: '', //几页
				passlist: [],
				selected_Tab: '',
				week_List: [{
						id: '',
						name: "全部",
					},
					{
						id: '2',
						name: "已结账",
					},
					{
						id: '1',
						name: "未结账",
					},
					{
						id: '3',
						name: "已撤销",
					}
				],
				showFilterPopup: false,
				selectId1: null,
				weekList1: [{
						id: '1',
						name: "已核销",
					},
					{
						id: '2',
						name: "有退款",
					},
					{
						id: '3',
						name: "已作废",
					}
				],
				selectId2: null,
				weekList2: [],
				selectId3: null,
				weekList3: [],
				selectId4: null,
				weekList4: [],
				selectId5: null,
				weekList5: [],
				selectId6: null,
				weekList6: [],
				checkStateList: [],
				area_id: '',
				jiaoSelect: [],
				train_program: [],
				coach_id: [],
				course_id: []
			};
		},

		onLoad(options) {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			// this.itemChooselist = this.venuelist[0]
			// 处理itemChooselist的逻辑
			if (this.venuelist.length > 0) {
				this.itemChooselist = this.venuelist[0]
				this.venue_id = this.venuelist[0].id
			} else {
				this.itemChooselist = {}; // 或者设置为其他默认值
			}
			this.consumeindex()
			// this.cls_options()
			this.conflist()
			this.operator()
			this.confprojects()
			this.getTypes()
		},
		methods: {
			copyId(item) {
				// 获取要复制的文本内容
				let text = item.consume_trade_no;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			async conflist() {
				let params = {};
				let res = await venues.conflist(params);
				if (res.code == 1) {
					this.weekList2 = res.data.channelList
					this.checkStateList = res.data.checkStateList
				}
			},
			async operator() {
				let params = {};
				let res = await venues.operator(params);
				if (res.code == 1) {
					this.weekList6 = res.data
				}
			},
			async confprojects() {
				let params = {};
				let res = await venues.confprojects(params);
				if (res.code == 1) {
					this.weekList4 = res.data
				}
			},
			async getTypes() {
				let params = {};
				let res = await venues.getTypes(params);
				if (res.code == 1) {
					this.weekList5 = res.data
				}
			},
			// async cls_options() {
			// 	let params = {
			// 		venue_id: this.venue_id,
			// 	};
			// 	let res = await train.cls_options(params);
			// 	if (res.code == 1) {
			// 		this.weekList1 = res.data.areaList
			// 		this.weekList2 = res.data.projectList
			// 		this.weekList3 = res.data.statusList
			// 		this.weekList4 = res.data.coachList
			// 		this.weekList5 = res.data.courseList
			// 		this.weekList6 = res.data.trainEnumList
			// 	}
			// },
			openFilter() {
				this.showFilterPopup = true;
			},
			closehomeInfo() {
				this.showFilterPopup = false;
			},
			search(e) {
				console.log(e, 'e')
				this.keyword = e
				this.consumeindex()
			},
			timesSelect1(item, index) {
				if (this.selectId1 === index) {
					this.selectId1 = null;
					this.area_id = ''
				} else {
					this.selectId1 = index
					this.area_id = item.id
				}
				this.consumeindex()
			},
			timesSelect2(item, idx) {
				let data = idx;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.train_program.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.train_program.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.train_program.push(data);
				}
				console.log(this.train_program, 'sss')
				this.consumeindex()
			},
			timesSelect6(item) {
				// if (this.selectId6 === index) {
				// 	this.selectId6 = null;
				// 	this.train_enum_id = ''
				// } else {
				// 	this.selectId6 = index
				// 	this.train_enum_id = item.id
				// }
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.jiaoSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.jiaoSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.jiaoSelect.push(data);
				}
				console.log(this.jiaoSelect, 'sss')
				this.consumeindex()
			},
			timesSelect3(item, index) {
				if (this.selectId3 === index) {
					this.selectId3 = null;
					this.status = ''
				} else {
					this.selectId3 = index
					this.status = index
				}
				this.consumeindex()
			},
			timesSelect4(item) {
				console.log(item, 'item,idx')
				let data = item.name;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.coach_id.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.coach_id.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.coach_id.push(data);
				}
				console.log(this.coach_id, 'sss')
				this.consumeindex()
			},
			timesSelect5(item) {
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.course_id.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.course_id.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.course_id.push(data);
				}
				console.log(this.course_id, 'sss')
				this.consumeindex()
			},
			selectedTab(item, index) {
				this.listQuery.pageNo = 1
				this.passlist = []
				this.selected_Tab = item.id
				this.status = item.id
				this.consumeindex()
			},
			async consumeindex() {
				const newArray = this.jiaoSelect.filter(item => typeof item === 'number').map(item => [item]);
				const train_Array = this.train_program.filter(item => typeof item === 'string' && !isNaN(Number(item)))
					.map(item => [Number(item)]);
				const coach_Array = this.coach_id.filter(item => typeof item === 'string').map(item => [item]);
				const course_Array = this.course_id.filter(item => typeof item === 'number').map(item => [item]);

				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let data = {
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					venue_id: this.venue_id,
					check_state: this.selected_Tab,
					record_state: this.area_id,
					oper_ids: newArray,
					source: train_Array,
					projects: coach_Array,
					consume_type: course_Array,
					code_no: this.keyword
				};
				let res = await venues.consumeindex(data);
				if (res.code == 1) {
					that.passlist = that.passlist.concat(res.data.data); //将数据拼接在一起
					console.log(this.passlist, 'passlist')
					that.totalPage = res.data.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.consumeindex()
			},
			confirm1(data) {
				this.venue_id = data
				// 直接根据接收到的 id 在 venuelist 中查找对应的场馆对象
				const selectedItem = this.venuelist.find(item => item.id === data);
				if (selectedItem) {
					// 将找到的场馆对象赋值给 itemChooselist
					this.itemChooselist = selectedItem;
				}
				this.consumeindex()
			},
			showDetail(record) {
				this.currentRecord = record;
				this.showDialog = true;
			},
			handleAdd() {
				// 添加新记录的逻辑
			},
			applyFilter() {
				this.showFilterDialog = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 全局盒模型 */
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* 基础布局 */
	.flex {
		display: flex;
	}

	.flex-col {
		flex-direction: column;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.items-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.gap-2 {
		gap: 16rpx;
	}

	.gap-4 {
		gap: 32rpx;
	}

	/* 容器样式 */
	.container {
		padding: 0 32rpx;
	}

	.min-h-screen {
		min-height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #EDF5F5;
		padding: 0rpx 0 50rpx 0;
		position: relative;
	}

	.pt-14 {
		padding-top: 112rpx;
	}

	.pb-20 {
		padding-bottom: 20rpx;
	}

	.pt-4 {
		padding-top: 32rpx;
	}

	.pb-6 {
		padding-bottom: 48rpx;
	}

	/* 顶部导航栏 */
	.top-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #ffffff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	/* 卡片样式 */
	.card {
		border-radius: 24rpx;
		box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.05);
		background-color: #fff;
	}

	.p-4 {
		padding: 20rpx;
	}

	.mb-4 {
		margin-bottom: 20rpx;
	}

	.hover-bg-gray-50:hover {
		background-color: #f9fafb;
	}

	/* 图片样式 */
	.venue-avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	/* 文字样式 */
	.text-lg {
		font-size: 32rpx;
	}

	.text-sm {
		font-size: 28rpx;
	}

	.text-xs {
		font-size: 24rpx;
	}

	.font-medium {
		font-weight: 500;
	}

	.text-gray-600 {
		color: #6b7280;
	}

	.text-gray-500 {
		color: #9ca3af;
	}

	/* 按钮样式 */
	.filter-btn,
	.add-btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-btn {
		background-color: #409eff;
	}

	.add-btn .u-icon {
		color: #fff;
	}

	/* 列表项样式 */
	.record-card {
		border-radius: 24rpx;
		transition: all 0.2s ease;
		background-color: #fff;
		border-radius: 10rpx;
		width: 94%;
		margin-left: 3%;
		border: 2rpx #fff solid;
		display: flex;
		flex-direction: column;
	}

	.card-content {
		border-radius: inherit;
	}

	.record-header {
		margin-bottom: 16rpx;
		// padding-bottom: 16rpx;
		border-color: #e5e7eb;
	}

	.record-info {
		margin-bottom: 16rpx;
	}

	.card-no-group {
		// min-width: 360rpx;
	}

	.copy-icon {
		cursor: pointer;
	}

	/* 状态标签样式 */
	.bg-gray-100 {
		background-color: #f3f4f6;
		padding: 0 12rpx;
	}

	.bg-purple-100 {
		background-color: #f5f3ff;
		padding: 6rpx 12rpx;
	}

	.bg-blue-100 {
		background-color: #ebf4ff;
		padding: 6rpx 12rpx;
	}

	.bg-red-100 {
		background-color: #ffe4e6;
		padding: 6rpx 12rpx;
	}

	.bg-green-100 {
		background-color: #e5f3eb;
		padding: 6rpx 12rpx;
	}

	/* 文本颜色定义 */
	.text-yellow-600 {
		color: #d97706;
	}

	/* 黄色 600 色值，示例值 */
	.text-green-600 {
		color: #059669;
	}

	/* 绿色 600 色值，示例值 */
	.text-red-600 {
		color: #dc2626;
	}

	/* 红色 600 色值，示例值 */
	.text-blue-600 {
		color: #1d4ed8;
	}

	/* 蓝色 600 色值，示例值 */
	.text-purple-600 {
		color: #7e22ce;
	}

	/* 紫色 600 色值，示例值 */

	.rounded {
		border-radius: 8rpx;
	}

	.px-2 {
		padding-left: 12rpx;
		padding-right: 12rpx;
	}

	.py-1 {
		padding-top: 6rpx;
		padding-bottom: 6rpx;
	}

	/* 底部标签栏 */
	.bottom-tabbar {
		height: 112rpx;
		border-top: 2rpx solid #e5e7eb;
	}

	.tab-item {
		align-items: center;
		justify-content: center;
	}

	.tab-text {
		margin-top: 4rpx;
		font-size: 20rpx;
	}

	.text-blue-500 {
		color: #409eff;
	}

	.text-gray-500 {
		color: #6c757d;
	}

	/* 响应式样式 */
	@media (min-width: 768px) {
		.container {
			padding: 0 64rpx;
		}

		.pt-14 {
			padding-top: 144rpx;
		}

		.pb-20 {
			padding-bottom: 20rpx;
		}
	}

	.tab-filter {
		background-color: #ffffff;
		padding: 0 32rpx 20rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tabs {
		display: flex;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.tab-item {
		padding: 16rpx 20rpx;
		margin-right: 32rpx;
		position: relative;
		font-size: 26rpx;
	}

	.tab-item.active {
		color: #2979ff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 0;
		right: 0;
		height: 4rpx;
		background-color: #2979ff;
	}

	.box_11 {
		width: 100%;
		height: 130rpx;
		display: flex;
		flex-direction: row;
		background: #ffffff;
		padding: 0 20rpx;

		// .image-wrapper_7 {
		// 	width: 541rpx;
		// 	height: 60rpx;
		// 	flex-direction: row;
		// 	display: flex;
		// 	margin-top: 15rpx;
		// }
		.image-wrapper_7 {
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			width: 600rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
		}

		.label_list {
			display: flex;
			flex-direction: column;
			position: absolute;
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			/*  子元素相对父元素垂直居中 */
			right: 90rpx;
			width: 80rpx;
			top: 27rpx;

			.label_7 {
				width: 36rpx;
				height: 36rpx;
			}

			.label_77 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}

		.label8_list {
			display: flex;
			flex-direction: column;
			position: absolute;
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			/*  子元素相对父元素垂直居中 */
			right: 20rpx;
			width: 80rpx;
			top: 27rpx;

			.label_8 {
				width: 36rpx;
				height: 36rpx;
			}

			.label_88 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	.filter-content {
		background-color: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		border-radius: 32rpx 32rpx 0 0;

		.filter-item {
			margin-bottom: 24rpx;
		}

		.item {
			// padding: 29rpx 30rpx 30rpx;
			padding: 0 20rpx 20rpx 20rpx;

			.atinput {
				// border: #EBECEE 1rpx solid;
				font-size: 24rpx;
				height: 60rpx;
				width: 600rpx;
				padding-left: 20rpx;
			}

			.item-title {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.value {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
			}

			.time-cell {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
				justify-content: flex-start;

				.time {
					width: 49%;

					&:last-of-type {
						margin-left: 20rpx;
					}
				}
			}

			.week-list {
				flex-direction: row;
				width: 100%;
				font-size: 24rpx;
				flex-wrap: wrap;
				display: flex;

				.week-item {
					padding: 15rpx 0;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					text-align: center;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					border: solid 2rpx transparent;
					box-sizing: border-box;
					padding: 6rpx 12rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
				}

				.active {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}

				.active1 {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}

				.active2 {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}

				.check {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					position: absolute;
					bottom: 10rpx;
					right: 0;
				}
			}
		}
	}
</style>